<template>
  <div class="alignment-panel-modal">
    <je-modal
      v-model:visible="isShow"
      title="位置调整"
      width="460px"
      height="auto"
      style="text-align: center"
      :ok-button="okButton"
      :resize="false"
      :maximizable="false"
      cancel-button
      @close="onButton"
    >
      <div style="padding: 20px 0">
        <je-radio-group
          v-model:value="locationValue"
          style="justify-content: center"
          button-style="solid"
          option-type="button"
          config-info="JE_FUNC_FIELD_ALIGN,locationValue,code,S"
        />
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent } from 'vue';
  import { Modal, Radio } from '@jecloud/ui';

  export default defineComponent({
    name: 'AlignmentPanel',
    components: {
      JeModal: Modal,
      JeRadioGroup: Radio.Group,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      location: {
        type: String,
        default: '',
      },
    },
    emits: ['changeModal', 'refreshChildData'],
    setup(props, { emit }) {
      // modal弹窗的显示隐藏
      const isShow = ref(props.visble);
      const locationValue = ref(props.location);
      const okButton = () => {
        // 1刷新列表
        emit('refreshChildData', locationValue.value);
        // 2.关闭窗口
        onButton();
      };
      const onButton = () => {
        isShow.value = false;
        emit('changeModal', isShow.value);
      };
      return { isShow, okButton, onButton, locationValue };
    },
  });
</script>
<style lang="less" scoped>
  .extend-panel-modal {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
</style>
